<template>
    <div class="main">
        <div class="top">
            <p class="toptitle">首页</p>
            <i class="iconfont icon-youjiantou"></i>
            <p class="lasttitle">商品管理</p>
        </div>
        <div class="table">
            <p class="list">店铺管理</p>
            <el-form :model="form" label-width="auto">
                <el-form-item label="店铺名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="公告">
                    <el-input v-model="form.bulletin" type="textarea" :rows="5" />
                </el-form-item>
                <el-form-item label="店铺头像" prop="avatar">
                    <el-upload
                        class="avatar-uploader"
                        :action="serverUrl + 'api/shop/upload'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="form.avatar" :src="serverUrl + form.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="店铺介绍图" prop="pics">
                    <el-upload
                        v-model:file-list="fileList"
                        :action="serverUrl + 'api/shop/upload'"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="起送价格">
                    <el-input v-model="form.minPrice" type="number" />
                </el-form-item>
                <el-form-item label="送达时间">
                    <el-input v-model="form.deliveryTime" type="number" />
                </el-form-item>
                <el-form-item label="配送描述">
                    <el-input v-model="form.description" />
                </el-form-item>
                <el-form-item label="店铺评分">
                    <el-input v-model="form.score" type="number" />
                </el-form-item>
                <el-form-item label="店铺销量">
                    <el-input v-model="form.sellCount" type="number" />
                </el-form-item>
                <el-form-item label="店铺活动">
                    <el-checkbox-group v-model="form.supports">
                        <el-checkbox value="单人精彩套餐" name="type">
                            单人精彩套餐
                        </el-checkbox>
                        <el-checkbox value="VC无限橙果汁全场8折" name="type">
                            VC无限橙果汁全场8折
                        </el-checkbox>
                        <el-checkbox value="在线支付满28减5" name="type">
                            在线支付满28减5
                        </el-checkbox>
                        <el-checkbox value="特价饮品八折抢购" name="type">
                            特价饮品八折抢购
                        </el-checkbox>
                        <el-checkbox value="中秋特惠" name="type">
                            中秋特惠
                        </el-checkbox>
                        <el-checkbox value="国庆特价" name="type">
                            国庆特价
                        </el-checkbox>
                        <el-checkbox value="春节1折折扣" name="type">
                            春节1折折扣
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="营业时间" style="width: 450px;">
                    <el-time-picker
                        v-model="form.date"
                        is-range
                        range-separator="至"
                        start-placeholder="Start time"
                        end-placeholder="End time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveBtn">保存</el-button>
                </el-form-item>
            </el-form>
            <el-dialog :visible.sync="dialogVisible" title="图片预览">
                <template #content>
                    <img :src="dialogImageUrl" class="dialog-img" />
                </template>
                <template #footer>
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { shopInfo, shopEdit } from '../../api/shop';
import { serverUrl } from '../../utils/commen';
import { ElMessage } from 'element-plus';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';

const form = ref({
    id: '',
    name: '',
    bulletin: '',
    avatar: '',
    pics: '',
    minPrice: '',
    deliveryTime: '',
    description: '',
    score: '',
    sellCount: '',
    supports: [],
    date: ''
});
// 店铺多图
const fileList = ref([]);
// 预览图片的弹窗
const dialogVisible = ref(false);
// 预览图片的路径
const dialogImageUrl = ref('');

const getShopInfo = async () => {
    const res = await shopInfo();
    form.value = res.data;
    fileList.value = res.data.pics.map((item) => {
        return { name: item, url: serverUrl + item };
    });
};
getShopInfo();

const saveBtn = async () => {
    // 浅拷贝数据
    const formData = { ...form.value };
    // 修改部分不满足提交格式的数据 重组提交数据
    formData.date = JSON.stringify(formData.date);
    formData.supports = JSON.stringify(formData.supports);
    formData.avatar = formData.avatar.slice(formData.avatar.lastIndexOf('/') + 1);
    const pics = fileList.value.map((item) => {
        // 如果没有response 证明这张图没有修改，直接用item.name做截取
        // 如果有response 证明这张图修改了，用item.response.imgUrl做截取
        let filename = item.name;
        if (item.response) {
            filename = item.response.imgUrl;
        }
        let index = filename.lastIndexOf('/');
        
        return filename.slice(index + 1);
    });

    formData.pics = JSON.stringify(pics);
    

    let { code, msg } = await shopEdit(formData);
    if (code === 0) {
        ElMessage.success(msg);
        // 刷新页面--重新请求 默认数据--重新渲染页面
        getShopInfo();
    } else {
        ElMessage.error(msg);
    }
};

const beforeAvatarUpload = (rawFile) => {
    if (!rawFile.type.includes('image')) {
        ElMessage.error('店铺头像必须是图片');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过2MB!');
        return false;
    }
    return true;
};
// 点击预览
const handlePictureCardPreview = (res) => {
    dialogImageUrl.value = res.url;
    dialogVisible.value = true;
};
const handleRemove = (res) => {
    console.log(res);
};
// 店铺头像 上传成功hooks
const handleAvatarSuccess = (res) => {
    //  页面的图片回显  // form的数据需要改变
    form.value.avatar = res.imgUrl;
};
</script>

<style scoped>
.main {
    width: 100%;
    height: 730px;
    background-color: #f0f0f0;
}

/* 中间 */
.table {
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    height: 600px;
    overflow-y: scroll;
}

.list {
    width: 100%;
    border-bottom: 1px solid #e1e1e1;
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* 顶部面包屑 */
.toptitle {
    font-weight: bold;
}

.top {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 20px;
}

.iconfont {
    font-size: 14px;
    color: #999999;
    margin: 0 5px;
}

.lasttitle {
    color: #999999;
}

/*  */

.nav {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

:deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

:deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
}

.dialog-img {
    width: 100%;
}
</style>    